﻿<template>
  <div class="goodsDetails">
		
		<div class="carouselFigure">
			<swiper-light-box v-if="isShowLightBox" @closeLightBox="hideBox" :picArr="swiperImgs" :index="index"></swiper-light-box>
			<swiper :options="swiperOption" ref="goodsPicsSwiper">
        <swiper-slide v-for="(url, index) in swiperImgs" 
                      :index='index' 
                      @showLightBox='showBox'>
          <img :src="url" />
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      
      <div class="love">
      	<img src="../../static/img/goods/noCollection.png" alt="" v-if="!isCollected" @click="isCollected=!isCollected"/>
      	<img src="../../static/img/goods/collection.png" alt="" v-if="isCollected" @click="isCollected=!isCollected"/>
      </div>
		</div>
		
		
		<div class="goodsInfos">
			<div class="goodsName">LouisVuitton</div>
			<div class="goodsInfoDetails">女士卡其白色边PVC手提单肩女士卡士边PVC白色</div>
			<div class="goodsInfoPrice"><span class="one">￥</span><span class="two">3600</span><span class="three">[<span>95</span>新]</span></div>
			<div class="labels clearfix">
				<div><img src="../../static/img/goods/new.png"></img></div>
				<div><img src="../../static/img/goods/hot.png" alt="" /></div>
			</div>
			<div class="toShop">
				<img src="../img/goods/location.png" alt="" />
				<p>到店看</p>
			</div>
		</div>
		
		
		<div class="goodsAttrs">
			<div>商品参数</div>
			<p class="clearfix"><a>新旧程度</a>：<span>已使用AB [等级说明]</span> <img src="../img/goods/question.png" alt="" /></p>
			<p class="clearfix"><a>机芯种类</a>：<span>手动</span></p>
			<p class="clearfix"><a>人群</a>：<span>中性表</span></p>
			<p class="clearfix"><a>品牌</a>：<span>伯爵</span></p>
			<p class="clearfix"><a>表壳形状</a>：<span>圆形</span></p>
			<p class="clearfix"><a>表壳材质</a>：<span>k金</span></p>
			<p class="clearfix"><a>表镜材质</a>：<span>蓝宝石</span></p>
			<p class="clearfix"><a>表带材质</a>：<span>k金</span></p>
			<p class="clearfix"><a>配件配置</a>：<span>盒</span></p>
			<p class="clearfix"><a>克重</a>：<span>约97.6g</span></p>
			<p class="clearfix"><a>表径</a>：<span>34mm</span></p>
			<p class="clearfix"><a>全长约</a>：<span>18cm</span></p>
			<p class="clearfix"><a>门店</a>：<span>北京展卖5</span></p>
		</div>
		
		
		<div class="selectDown">
			<div class="title clearfix" @click="whyTrust=!whyTrust">售后说明<img src="../img/goods/b_filter_arrow_up_con@2x.png" alt="" :class="{reverse: whyTrust==true}"/></div>
			<div class="content" v-if="whyTrust"></div>
		</div>
		
		<div class="selectDown">
			<div class="title clearfix" @click="customerService=!customerService">我们为什么值得您信任?<img src="../img/goods/b_filter_arrow_up_con@2x.png" alt="" :class="{reverse: customerService==true}"/></div>
			<div class="content" v-if="customerService"></div>
		</div>
		
		<div class="selectDown">
			<div class="title clearfix" @click="littleKnowledge=!littleKnowledge">手表小知识<img src="../img/goods/b_filter_arrow_up_con@2x.png" alt="" :class="{reverse: littleKnowledge==true}"/></div>
			<div class="content" v-if="littleKnowledge"></div>
		</div>
		
		
		<div class="gdFooterBox">
			<div class="gdFooter clearfix">
				<div class="bgRgt">
					<img src="../img/goods/headset.png" alt="" />
					<p>联系客服</p>
				</div>
				<div>
					<img src="../img/goods/shopBag.png" alt="" style="width:0.38rem;"/>
					<p>购物袋</p>
				</div>
				<p>加入购物车</p>
				<p class="bgRed" @click="buyNow">立即购买</p>
			</div>
		</div>
		
  </div>
</template>

<script src="../js/views/goodsDetails.js"></script>

<style scoped>
	@import '../css/views/goodsDetails.css'
</style>
